<!-- HomeIndex -->
<template>
  <div id="HomeIndex">
    <el-row :gutter="10" class="home_top_box">
      <el-col :span="8">
        <HomeUserShow :user-info="userInfo" />
      </el-col>

      <el-col :span="16">
        <el-row :gutter="10">
          <HomeTopStatistics :count-data="countData" />
        </el-row>
      </el-col>
    </el-row>

    <el-row :gutter="10" class="home_footer_box margin_top">
      <el-col :span="8">
        <HomenTabTableShow :table-data="tableData" />
      </el-col>
      <el-col :span="16">
        <el-card class="homen_ecarts_show" shadow="hover">
          <HomenEcartsShow v-if="lineEcartsData.order" :chart-data="lineEcartsData.order" :chart-style="{ height: '32vh', width: '100%' }" />
          <div className="margin_top">
            <HomenEcartsShow v-if="lineEcartsData.user" :chart-data="lineEcartsData.user" :chart-style="{ height: '32vh', width: '100%' }" style="float: left; width: 50%;" />
            <HomenEcartsShow v-if="lineEcartsData.video" :chart-data="lineEcartsData.video" :is-axisc-chart="false" :chart-style="{ height: '32vh', width: '100%' }" style="float: right; width: 50%;" />
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  Get_Data_Api
} from '@/Api/HomeApi'
import { mapState } from 'vuex'
import HomeUserShow from './components/HomeUserShow'
import HomeTopStatistics from './components/HomeTopStatistics'
import HomenTabTableShow from './components/HomenTabTableShow'
import HomenEcartsShow from './components/HomenEcartsShow'
export default {
  name: 'HomeIndex',
  components: {
    HomeUserShow,
    HomeTopStatistics,
    HomenTabTableShow,
    HomenEcartsShow
  },
  data() {
    return {
      userInfo: {}, // 用户信息
      tableData: [], // 表格数据
      countData: [], // 统计数据
      lineEcartsData: {} // 首页统计数据
    }
  },
  /* HTML DOM加载后马上执行的，如赋值*/
  computed: {
    ...mapState('Common', [
      'MessageDuration',
      'CommonMessageCenter'
    ])
  },

  /* 观察Vue实例上的数据变动 */
  watch: {},

  /* 模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图 */
  created() {},

  /* 模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作 */
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.Get_Data_Api_Fun() // 获取首页数据
  },

  /* methods则必须要有一定的触发条件才能执行 */
  methods: {
    /**
     * @date: 2024-10-29 22:22:30
     * @description: 获取首页数据
     * @modifyContent:
     * @author: Forever丿顾北
    **/
    Get_Data_Api_Fun() {
      /**
       * @date: 2024-07-19 16:48:08
       * @description:结构对应参数
       * @author: Forever丿顾北
       * @returns{ * }: ${tableData 表格数据}
       * @returns{ * }: ${countData 统计数据}
       * @returns{ * }: ${orderData 订单数据（折线图数据）}
       * @returns{ * }: ${userData 用户数据（柱形图数据）}
       * @returns{ * }: ${videoData 饼图数据}
      **/
      Get_Data_Api().then(res => {
        console.log('11111111111', res)
        if (res.code === 200) {
          const { tableData, countData, orderData, userData, videoData } = res.data
          this.tableData = tableData
          this.countData = countData
          // 对于 echarts 数据的处理
          const order = orderData // 折线图数据
          const xData = order.date
          const keyArray = Object.keys(order.data[0])
          const series = []
          keyArray.forEach(key => {
            series.push({
              name: key,
              type: 'line',
              data: order.data.map(item => item[key])
            })
          })
          this.lineEcartsData = {
            order: {
              xData: xData,
              series: series
            },
            user: {
              xData: userData.map(item => item.date),
              series: [
                {
                  name: '新增用户',
                  type: 'bar',
                  data: userData.map(item => item.new)
                },
                {
                  name: '活跃用户',
                  type: 'bar',
                  data: userData.map(item => item.active)
                }
              ]
            },
            video: {
              series: [
                {
                  data: videoData,
                  type: 'pie'
                }
              ]
            }
          }

          this.tableData = tableData.map((item, index) => ({ ...item, id: index })) // 首页表格数据
          this.countData = countData // 首页统计数据
        } else {
          this.$message({
            message: res.msg,
            type: 'error',
            duration: this.MessageDuration,
            center: this.CommonMessageCenter
          })
        }
      })
    }
  }
}
</script>

<style lang='scss' scoped>
#EchartsId{
  height: 300px;
}
</style>
